<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器学习</title>

    <style>
        /* 
        标签选择器 
        设置标签为div的所有元素的颜色为蓝色
        优先级：
        标签选择器的优先级最低
        标签选择器的作用范围是整个文档
        */
        div {
            color: blue;
        }

        /*
        类选择器
        设置标签为font32的所有元素的字体大小为32px
        类选择器的作用范围是整个文档
        类选择器的优先级高于标签选择器
        */
        .font32 {
            /* 标签选择器优先级低于类选择器，所以最终是类选择的颜色生效 */
            color: aqua;
            font-size: 32px;

        }

        /* 
        id选择器用法和优先级 
        id选择器的优先级高于类选择器
        id选择器的作用范围是整个文档
        */

        #submit {
            color: red;
        }

        /*
        通配符选择器
        通配符选择器的优先级最低
        通配符选择器的作用范围是整个文档
        */
        *{
            color: green;
        }
        /*复合选择器*/
        ul li a{
            color: blueviolet;
        }

    </style>
</head>

<body>
    <div class="font32">我是⼀个div, class为font32</div>
    <div class="font32">我是⼀个div, class为font32</div>
    <div><a href="#">我是⼀个div</a></div>
    <!-- ul标签的含义与用法 -->
    <!-- 产生无序排序 -->
    <ul>
        <!-- li标签的含义与用法 -->
        <!-- 产生列表项 -->
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>
    <!-- ol标签的含义与用法 -->
    <!-- 产生有序排序 -->
    <ol>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
    </ol>
    <button id="submit" class="font32">提交</button>

</body>

</html>